<template>
  <header class="header">
    <div class="container">
      <h2 class="logo" @click="handleLogo">
        <router-link to="/home" class="logo-text">开发者中心</router-link>
      </h2>
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#1e212a"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">开发中心</template>
          <el-menu-item index="/projectList">实战项目</el-menu-item>
          <el-menu-item index="/interfaceList">在线接口</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">奇闻趣事</template>
          <el-menu-item index="/notice">公告</el-menu-item>
          <el-menu-item index="/informationList">业内资讯</el-menu-item>
          <el-menu-item index="/blogList">技术文章</el-menu-item>
        </el-submenu>
        <el-menu-item index="/exampleList">精品案例</el-menu-item>
        <el-menu-item index="/documentList">资料中心</el-menu-item>
      </el-menu>
    </div>
  </header>
</template>

<script>
  export default {
    name: "wj-header",
    data() {
      return {
        activeIndex: "1"
      }
    },
    methods: {
      handleSelect(index) {
        if (this.$route.path !== index) {
          this.$router.push(`${index}`)
          this.activeIndex = index
        }
      },
      handleLogo() {
        this.activeIndex = "0";
        this.$router.push('/')
      }
    }
  }
</script>

<style scoped>
  .header {
    height: 62px;
    line-height: 62px;
    overflow: hidden;
    background-color: #1e212a;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }

  .logo {
    display: inline-block;
    line-height: 62px;
    position: relative;
    top: -25px;
    padding-right: 100px;
  }

  .logo-text {
    text-decoration: none;
  }

  .logo-text.active {
    color: #ccc;
  }

  .el-menu {
    height: 62px;
  }

  .el-menu-demo {
    display: inline-block;
  }

</style>